<template>
  <div>
    <div class="personal-box flex">
      <img
        :src="user.avatar"
        width="90"
        height="90"
        class="circle"
        style="margin-right: 28px"
      />
      <div class="userinfo">
        <div class="nickname">{{ user.nickname }}</div>
        <div class="position">前端·公司名称</div>
        <div class="signature">签名</div>
      </div>
      <!--            <button class="setting-btn">编辑个人资料</button>-->
      <router-link tag="button" class="setting-btn" to="/user/settings/profile"
        >编辑个人资料</router-link
      >
    </div>
    <ul class="flex nav-ul">
      <li>
        <router-link class="nav-item" exact :to="`/user/${userId}`"
          >我喜欢的文章</router-link
        >
      </li>
      <li>
        <router-link class="nav-item" :to="`/user/${userId}/following`">
          关注的人</router-link
        >
      </li>
      <li>
        <router-link class="nav-item" :to="`/user/${userId}/follows`"
          >我的粉丝</router-link
        >
      </li>
    </ul>
    <router-view keep-alive :userId="userId"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
    };
  },
  computed: {
    userId() {
      return this.$route.params.id;
    },
    loginUser() {
      return this.$store.state.user;
    },
  },
  async created() {
    let res = await this.$http.get("/user/" + this.userId);
    this.user = res.data;
  },
};
</script>

<style scoped lang="less">
.personal-box {
  width: 100%;
  padding: 30px;

  .userinfo {
    flex: 1 1 auto;
    margin-right: 24px;
    display: flex;
    flex-direction: column;

    .nickname {
      margin: 0;
      padding: 0;
      font-size: 30px;
      font-weight: 600;
      line-height: 1.2;
      color: #000;
    }

    .position {
      margin-top: 12px;
    }

    .signature {
      margin-top: 5px;
    }
  }

  .setting-btn {
    margin: 12px 0 0;
    padding: 0 5px;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid;
    background-color: #fff;
    border-radius: 4px;
    color: #3780f7;
  }
}

.nav-ul {
  height: 50px;
  border-bottom: 1px solid #ebebeb;

  li {
    height: 100%;
  }

  .nav-item {
    padding: 0 20px;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #31445b;
    height: 100%;
    line-height: 50px;
  }

  .router-link-active {
    box-shadow: inset 0 -2px 0 #3780f7;
    color: #3780f7;
  }
}
</style>
